@import "../../../../assets/common.styl"
.btn.btn-player
  width: 30px
  height: 30px
  text-align: center
  padding: 6px
  font-size: 12px
  line-height: 1.428571429
  border-radius: 15px
  outline: none !important
  color: white
  background-color: #337ab7
  border-color: #337ab7
.btn.btn-circle
  width: 30px
  height: 30px
  text-align: center
  padding: 6px
  font-size: 12px
  line-height: 1.428571429
  border-radius: 15px
  outline: none !important
.btn-circle.btn-lg
  width: 50px
  height: 50px
  padding: 10px 16px
  font-size: 18px
  line-height: 1.33
  border-radius: 25px
.btn-circle.btn-xl
  width: 70px
  height: 70px
  padding: 10px 16px
  font-size: 24px
  line-height: 1.33
  border-radius: 35px
.player.container
  margin: 0
  padding: 0
div.player > .toolbar
  margin: 0
  padding: 10px 15px
  width: 100%
  height: 60px
  box-sizing border-box
  min-width 1200px
  border-bottom: 1px solid #eee
  background-color: #e6e6e6
.progress
  margin-top: 8px
  margin-bottom: 15px !important
.player-progress
  margin: 10px 10px 7px 0
/* input range */
input[type=range]
  -webkit-appearance: none
  width: 400px
  background: transparent
  position: relative
input[type=range]::-webkit-slider-thumb
  -webkit-appearance: none
input[type=range]:focus
  outline: none
input[type=range]::-ms-track
  width: 100%
  cursor: pointer
  background: transparent
  border-color: transparent
  color: transparent
input[type=range]::-webkit-slider-thumb
  -webkit-appearance: none
  height: 20px
  width: 20px
  border-radius: 50%
  background:  $c-main
  cursor: pointer
  margin-top: -6.5px
  margin-left: -0.5px
  border 2px solid #e6e6e6
input[type=range]::-webkit-slider-runnable-track
  width: 100%
  height: 8px
  cursor: pointer
  //background: #eee
  border-radius: 2px
  //border: 1px solid #eee
input[type=range]:focus::-webkit-slider-runnable-track
  //background: #eee;
#mousemovemap
  height: 100%
  width: 100%
  background-color: $cf-gray0
  opacity: 0.3
  min-width: 1676px
  min-height: 886px
  position: absolute !important
#clickmap
  height: 100%
  width: 100%
  background-color: $cf-gray0
  opacity: 0.3
  min-width: 1676px
  min-height: 886px
  position: absolute !important
.control
  float left
  margin-right 15px
  .btn
    color $c-main
    cursor pointer
    border: 1px solid
    height: 24px
    width: 24px
    display: block
    text-align: center
    line-height: 24px
    border-radius: 50%
    float: left
    .iconfont
      font-size 12px
  .btn-play
    height 30px
    width 30px
    line-height 30px
    margin-top -3px
    margin-left: -54px
    background-color: #e6e6e6
  .btn-next
    margin-left 24px
  .disable
    cursor not-allowed
    color #85bdf1
.progress-box
  float: left
  .current-info
    width: 400px
    text-align: center
.select-box
  position relative
  .page-select
    width: 220px
  .el-input
    width 240px
  .selected-page
    cursor pointer
    width: 190px
    background: $cf-white
    position: absolute
    top: 18px
    left: 2px
    padding-left 5px
    box-sizing border-box
    line-height: 24px
.console-bar
  position absolute
  right 10px
  top 10px
  cursor pointer
  .iconfont
    font-size: 14px
.track-movie-screen
  height calc(100% - 60px)
  overflow-y scroll
  overflow-x hidden
#player-iframe
  transform-origin: center top 0px
.progress-group
  width: 400px
  height: 8px
  position: fixed
  top: 20px
  .progress-item
    height: 100%
    width: 1px
    background: $c-border2
    float: left
    cursor: pointer
  .isBlack
    background $c-pink
  .passProgress
    background: $c-main !important
  .noPassProgress
    opacity 0
#progressBar
  max-width: 400px
  height: 8px
  position: fixed
  top: 20px
  background darkred
.track-mask
  height: calc(100% - 60px)
  width: calc(100% - 10px)
  position: absolute
  z-index: 1
  opacity: 0
